<template>

</template>
      
      <script lang="ts">
import { computed, ref, defineComponent, reactive, watchEffect, onBeforeMount } from "vue";
import { ElMessage } from "element-plus";
import store from "@/store";
import { useStore, mapMutations } from "vuex";

export default defineComponent({
  name: "Supplier",
  setup() {
    const store=useStore();
    const deleteRow = ref()
    const text = "操作";
    const search = ref("");
    const filterTableData = computed(() =>
      tableData.value.filter(
        (data) =>
          !search.value ||
          data.name.toLowerCase().includes(search.value.toLowerCase())
      )
    );
    const handleEdit = (index: number, row: ISuppliers) => {
      console.log(index, row);
      form.name = row.name;
      // edit(index, row)
    };
    const handleDelete = (index: number, row: ISuppliers) => {
      // console.log(index, row);
      // console.log(tableData.value[1]);
      // console.log(tableData.value.slice(1, 1));
      // let arr = JSON.parse(JSON.stringify(tableData.value))
      // console.log(arr,1);
      
      // arr.splice(index, 1);
      
      // console.log(arr,2);
      
      // tableData.value = arr;
      deleteRow.value = row

  }

    const confirmDeletion=()=>{
      console.log(
        deleteRow.value
      );
       
      
    //分页
    const pageSize = ref(10);
    const setPreData = mapMutations([
      "setPreData",
    ]).setPreData.bind({
      $store: store,
    });
    onBeforeMount(() => {
      setPreData({
        currentPage: 1,
        pageSize: pageSize.value
      });
    });
    const pageChange:any = (currentPage: any) => {
      setPreData({ currentPage: currentPage, pageSize: pageSize.value,costName:searchData.costName });
    };
    }

// 查询输入框
const searchData = reactive({
  costName: null,
});

    const tableData = ref([
      {
        id: 1,
        name: "急诊+病历本",
        subCharge: 1,
        amount: 399.0,
      },
      {
        id: 2,
        name: "急诊+病历本",
        subCharge: 1,
        amount: 399.0,
      },
      {
        id: 3,
        name: "急诊+病历本",
        subCharge: 1,
        amount: 399.0,
      },
      {
        id: 4,
        name: "急诊+病历本",
        subCharge: 1,
        amount: 399.0,
      },
      {
        id: 5,
        name: "急诊+病历本",
        subCharge: 1,
        amount: 399.0,
      },
      {
        id: 6,
        name: "急诊+病历本",
        subCharge: 1,
        amount: 399.0,
      },
      {
        id: 7,
        name: "急诊+病历本",
        subCharge: 1,
        amount: 399.0,
      },
      {
        id: 8,
        name: "急诊+病历本",
        subCharge: 1,
        amount: 399.0,
      },
    ]);
    
    

    //搜索新增框
    const radiusGroup = ref([
      {
        name: "Small Radius",
        type: "small",
      },
    ]);

    const getValue = (type: string) => {
      const getCssVarValue = (prefix: any, type: any) =>
        getComputedStyle(document.documentElement).getPropertyValue(
          `--el-${prefix}-${type}`
        );
      return getCssVarValue("border-radius", type);
    };
    const addSupplier = () => {
      //   (form.name = ""),
      //     (form.region = ""),
      //     (form.contactName = ""),
      //     (form.landline = ""),
      //     (form.tel = ""),
      //     (form.account = "");  
      dialogFormVisible.value = true;
    };
    //新增
    const dialogFormVisible = ref(false);

    const editDialog = ref(false);
    const formLabelWidth = "140px";

    const form = reactive({
      name: "",
      amount: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
    });
    //新增弹窗

    //正则表达式
    var reg = /^[\u0391-\uFFE5A-Za-z]+$/;
    var pattern = /^[1-9]\d*$/;
    var tel = /^((0\d{2,3}-\d{7,8})|(1[34578]\d{9}))$/;
    const validateTag = watchEffect(() => {
      if (!reg.test(form.name)) {
        form.name = "";
      }
      //   if (!reg.test(form.contactName)) {
      //     form.contactName = "";
      //   }
    //   if (!pattern.test(form.tel.toString())) {
    //     form.tel = "";
    //   }
    });
    //新增科室弹窗确认函数
    const supplierMaintenance = () => {
      if (!form.name) {
        ElMessage({
          showClose: true,
          message: "科室名称不能为空！",
          type: "error",
        });
      } else if (
        tableData.value.filter((data) => data.name.includes(form.name)).length >
        0
      ) {
        ElMessage({
          showClose: true,
          message: "科室名称已经存在！",
          type: "error",
        });
      } else {
        dialogFormVisible.value = false;
        // tableData.value.push({
        //   id: index,
        //   name: form.name,
        //   amount: Number(form.amount),
        // });
      }
    };
    //添加子费用
    const addSubCharge=(index:any)=>{
      
    }
    //编辑弹窗确认函数
    const edit = (index: number, row: ISuppliers) => {
      console.log(index, row);
      // (form.name = row.name),
      //   (form.region = row.address),
      //   (form.contactName = row.contact),
      //   (form.landline = row.landline),
      //   (form.tel = row.tel.toString()),
      //   (form.account = row.account.toString());
      editDialog.value = false;
    };
    //删除弹窗
    const centerDialogVisible = ref(false);
   
    return {
      text,
      search,
      filterTableData,
      handleEdit,
      edit,
      handleDelete,
      tableData,
      radiusGroup,
      getValue,
      getComputedStyle,
      editDialog,
      dialogFormVisible,
      formLabelWidth,
      form,
      supplierMaintenance,
      ElMessage,
      reg,
      validateTag,
      tel,
      centerDialogVisible,
      addSupplier,
      confirmDeletion,
    };
  },
});

interface ISuppliers {
  id: number;
  name: string;
  contact: string;
  landline: string;
  tel: number;
  account: number;
  address: string;
  date: string;
}
</script>
    <style scoped>
.body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.table {
  border: 1px solid #88888831;
  box-shadow: 0px 0px 5px 2.5px #88888831;
}
.demo-radius .title {
  color: var(--el-text-color-regular);
  font-size: 18px;
  margin: 10px 0;
}
.demo-radius .value {
  color: var(--el-text-color-primary);
  font-size: 16px;
  margin: 10px 0;
}
.demo-radius .radius {
  height: 60px;
  width: 1128px;
  border: 1px solid var(--el-border-color);
  border-radius: 0;
  margin: 20px;
  box-shadow: 0px 0px 5px 2.5px #88888831;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #ffffff;
}
.left {
  color: #676a6d;
}
/* 新增 */
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
.el-dialog {
  --el-dialog-width: 10%;
}
/* 删除弹窗 */
.dialog-footer button:first-child {
  margin-right: 10px;
}

#require{
 float: right;
 margin-left:20px
}
</style>
      